(function () {

    var unit = 100,
        canvas, context, canvas2, context2,
        height, width, xAxis, yAxis,
        draw;
    var percentMax = 0.95;//液体占容器的百分比
    var percentMin = 0;
    var maxHeight = 1;

    var wavePower = 4;
    var base64Data = '';
    //初始化
    function init() {
        
        canvas = document.getElementById("sineCanvas");
        
        canvas.width = document.documentElement.clientWidth; 
        canvas.height = 1000;
        
        context = canvas.getContext("2d");
        
        height = canvas.height;
        width = canvas.width;
        yAxis = 0;
        
        draw(true);
        
    }
    function draw(isEnd) {
        
        // 清理canvas画板
        context.clearRect(0, 0, width, height);

        //描绘波浪
        drawWave(['#fff','#fff'], 1, 1.5);
        
        xAxis = Math.floor(height*(maxHeight-percentMax));

        
        // 更新时间然后重新绘制
        draw.seconds = draw.seconds + .009;
        draw.t = draw.seconds*Math.PI;
        if(isEnd){
            draw(false);
            base64Data = canvas.toDataURL();
            console.log(base64Data);
            setVideo();
        }
    };
    draw.seconds = 0;
    draw.t = 0;

    /**
    * 描绘波浪
    * drawWave([渐变左侧颜色，右侧颜色], 不透明度, 波浪的幅度)
    */
    function drawWave(color, alpha, zoom) {
        context.globalAlpha = alpha;
        var linearGrad = context.createLinearGradient(0, 0, width, 0);
        linearGrad.addColorStop(0.0, color[0]);  
        linearGrad.addColorStop(1.0, color[1]); 
        context.fillStyle = linearGrad;
        
        context.beginPath(); //开始路径
        drawSine(draw.t / 0.5, zoom);
        context.lineTo(width + 10, height); //路径朝canvas右下
        context.lineTo(0, height); //路径朝canvas左下
        context.closePath() //封闭路径
        context.fill(); //涂色
    }

    /**
     * 画正弦
     * drawSine(时间, 波浪的浮动)
     */
    function drawSine(t, zoom) {

        var x = t; //将时间转换为x轴
        var y = Math.sin(x)/zoom;
        context.moveTo(yAxis, unit*y+xAxis); //在开始位置放置路径
        
        // 绘制波浪、横向幅度 
        for (var i = yAxis; i <= width + 10; i += 10) {
            x = t+(-yAxis+i)/unit/zoom;
            y = Math.sin(x - 0)/wavePower;
            context.lineTo(i, unit*y+xAxis);
        }
    }

    init();

    function setVideo(){
        var app = new PIXI.Application(document.documentElement.clientWidth, 600, { antialias: true ,transparent: true });
        document.body.appendChild(app.view);

        var blurFilter = new PIXI.filters.BlurFilter();
        blurFilter.blur = 20;

        app.stage.interactive = true;

        var container = new PIXI.Container();
        container.x = app.screen.width / 2;
        container.y = app.screen.height / 2;


        var videoDemo = document.getElementById('testDemo');
        var texture = PIXI.Texture.fromVideo(videoDemo);

        var source = texture.baseTexture.source;

        // 初回のplayを無効化する
        source.addEventListener('play', (function() {
        return function func() {
            this.pause();
            this.removeEventListener('play', func, false); // リスナ解除
        };
        })(), false);

        var videoSprite =  new PIXI.Sprite(texture);
        videoSprite.anchor.set(0.5);
        videoSprite.width = app.screen.width+80;
        videoSprite.height = (app.screen.width+80)/1.777777778;
        videoSprite.x = -40;
        videoSprite.y = -40;
        videoSprite.filters = [blurFilter];
        container.addChild(videoSprite);
        app.stage.addChild(container);

        let squareTexture = PIXI.Texture.fromImage(base64Data);
        var thing = new PIXI.Sprite(squareTexture);
        container.mask = thing;
 
    }
})();

